<template>
    <div class="box">
      <el-card>
        <template #header>
          <h3>店铺分类列表</h3>
        </template>
        <!-- 数据区域 -->
        <el-table :data="tableData" border>
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="categoryName" label="店铺分类"></el-table-column>
          <el-table-column label="操作">
            <template #header>
              <el-button
                type="primary"
                @click="handleAdd"
                size="small"
              >
                添加分类
              </el-button>
            </template>
            <template #default="scope">
              <el-button
                type="primary"
                @click="handleEdit(scope.row)"
                size="small"
              >
                编辑
              </el-button>
              <el-button
                type="danger"
                @click="handleDelete(scope.row)"
                size="small"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <template #footer>
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[2, 3, 5, 10]"
            layout="total, sizes,  prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </template>
      </el-card>
      <!-- 弹框区域 -->
      <el-dialog v-model="dialogFormVisible" :title="title" width="500">
        <el-form :model="shopCategoryForm">
          <el-form-item label="店铺分类名称">
            <el-input v-model="shopCategoryForm.categoryName" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="addData"> 提交 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script>
import * as shopAPI from "@/api/shop.js";
  export default {
    data() {
      return {
        // 分页参数
        currentPage: 1,
        pageSize: 10,
        total: 0,
        // 数据列表
        tableData: [],
        // 弹框参数
        dialogFormVisible: false,
        title: "添加店铺分类",
        shopCategoryForm: {},
      };
    },
    methods: {
      handleSizeChange() {
        this.loadShopCategoryList();
      },
      handleCurrentChange() {
        this.loadShopCategoryList();
      },
      // 加载店铺数据
      loadShopCategoryList() {
        shopAPI
          .shopCategoryPageListAPI({
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            op:"find"
          })
          .then((resp) => {
            this.total = resp.data.total;
            this.tableData = resp.data.datas;
          });
      },
      // 点击添加店铺分类
      handleAdd() {
        this.dialogFormVisible = true;
        this.title = "添加店铺分类";
        this.shopCategoryForm = {};
      },
      // 点击编辑店铺分类
      handleEdit(row) {
        this.dialogFormVisible = true;
        this.title = "编辑店铺分类";
        this.shopCategoryForm = row;
      },
      // 点击弹窗中的提交按钮
      addData() {
        // 判断本次添加还是修改
        if (this.title == "添加店铺分类") {
          shopAPI.shopCategoryAddAPI({...this.shopCategoryForm, op:"add"}).then((resp) => {
            if (resp.data == 1) {
              this.dialogFormVisible = false;
              this.loadShopCategoryList();
            }
          });
        } else {
          shopAPI.shopCategoryUpdateAPI({...this.shopCategoryForm, op:"update"}).then((resp) => {
            if (resp.data == 1) {
              this.dialogFormVisible = false;
              this.loadShopCategoryList();
            }
          });
        }
      },
      // 点击删除按钮
      handleDelete(row) {
        shopAPI.shopCategoryDeleteAPI({ categoryId: row.shopCategoryId , op:"delete" })
          .then((resp) => {
            if (resp.data == 1) {
              this.loadShopCategoryList();
            }
          });
      },
    },
    created() {
      this.loadShopCategoryList();
    },
  };
  </script>
  
  <style scoped></style>
  